<template>
  <view>
    <view style="display: flex; align-items: center; padding-right: 20rpx;margin-bottom: -30rpx;">
      <uni-search-bar 
        cancel-button="none" 
        @confirm="search" 
        :focus="true" 
        v-model="searchValue" 
        @blur="blur" 
        @focus="focus" 
        @input="input"
        @clear="clear"
        class="custom-search-bar"
      ></uni-search-bar>
      <text class="search-text" @click="search" style="margin-left: -20rpx;">搜索</text>
    </view>
	
	  <view class="lo">
	      <view class="history-label">历史记录:</view>
	      <view class="item">飞飞汽车维修店</view>
	      <view class="item">飞飞汽车维修店</view>
	      <view class="item">飞飞汽车维修店</view>
	    
	    </view>
    <view class="a1" style="margin-top: 40rpx;">
		<view style="margin-left: 30rpx;margin-bottom: 20rpx;">
		  <text style="margin-right: 340rpx;">东百事汽车生活馆</text>
		  <text style="color: #5593ff;">556m</text>
		</view>
		<view style="display: flex; align-items: center;margin-left: 30rpx;">
		  <uni-rate v-model="rateValue" @change="onChange" />
		  <text style="margin-left: 20rpx;">3分</text>
		  <text style="margin-left: 50rpx;">销量:322</text>
		</view>
     <view class="a2" style="padding: 20rpx; border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); display: flex;">
	   <img src="../../static/3.png" alt="" style="margin-right: 10px;width: 170rpx;height: 150rpx;" />
       <view class="h1">
         <view>营业时间:       </view>
		 <view>早上09:00-晚上22:00</view>
         <view>山阳区人民路32号</view> 
       </view>
	    </view>
		 </view>
    
	 
	 <view class="a1" style="margin-top: 40rpx;">
	 	<view style="margin-left: 30rpx;margin-bottom: 20rpx;">
	 	  <text style="margin-right: 340rpx;">东百事汽车生活馆</text>
	 	  <text style="color: #5593ff;">556m</text>
	 	</view>
	 	<view style="display: flex; align-items: center;margin-left: 30rpx;">
	 	  <uni-rate v-model="rateValue" @change="onChange" />
	 	  <text style="margin-left: 20rpx;">3分</text>
	 	  <text style="margin-left: 50rpx;">销量:322</text>
	 	</view>
	  <view class="a2" style="padding: 20rpx; border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); display: flex;">
	    <img src="../../static/3.png" alt="" style="margin-right: 10px;width: 170rpx;height: 150rpx;" />
	    <view class="h1">
	      <view>营业时间:      </view>
	 	 <view>早上09:00-晚上22:00</view>
	      <view>山阳区人民路32号</view> 
	    </view>
		    </view>
			 </view>
	 
	  <view class="a1" style="margin-top: 40rpx;">
	  	<view style="margin-left: 30rpx;margin-bottom: 20rpx;">
	  	  <text style="margin-right: 340rpx;">东百事汽车生活馆</text>
	  	  <text style="color: #5593ff;">556m</text>
	  	</view>
	  	<view style="display: flex; align-items: center;margin-left: 30rpx;">
	  	  <uni-rate v-model="rateValue" @change="onChange" />
	  	  <text style="margin-left: 20rpx;">3分</text>
	  	  <text style="margin-left: 50rpx;">销量:322</text>
	  	</view>
	   <view class="a2" style="padding: 20rpx; border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); display: flex;">
	     <img src="../../static/3.png" alt="" style="margin-right: 10px;width: 170rpx;height: 150rpx;" />
	     <view class="h1">
	       <view>营业时间:       </view>
	  	 <view>早上09:00-晚上22:00</view>
	       <view>山阳区人民路32号</view> 
	     </view>
	   </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '',
      rateValue: 3 // 初始化评分值
    };
  },
  methods: {
    search(res) {
      if (this.searchValue.trim() === '') {
        uni.showToast({
          title: '请输入搜索内容',
          icon: 'none'
        });
        return;
      }
      uni.showToast({
        title: '搜索：' + this.searchValue,
        icon: 'none'
      });
      // 这里可以触发搜索操作，比如调用 API 进行搜索
      // 例如：this.performSearch(this.searchValue);
    },
    input(res) {
      console.log('----input:', res);
    },
    blur() {
      console.log('----blur');
    },
    focus() {
      console.log('----focus');
    },
    clear() {
      console.log('----clear');
    },
    onChange(e) {
      console.log('评分改变:', e.value);
    }
  }
};
</script>

<style lang="scss">

.example-body {
  padding: 0px;
}
.uni-mt-10 {
  margin-top: 10px;
}
.a2 {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.search-text {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.custom-search-bar {
  flex: 1; /* 使搜索框占据剩余空间 */
  margin-right: 10px;
  width: 80%; /* 加长搜索框的宽度 */
}
.lo {
  display: flex;
  flex-wrap: wrap; /* 允许内容换行 */
  gap: 10px 20px; /* 设置元素之间的上下和左右间距 */
  padding: 20px; /* 设置整体的内边距 */
  color: white;
  margin-bottom: -10rpx;
}

.history-label {
  white-space: nowrap; /* 防止文字换行 */
  font-size: 18px; /* 设置历史记录的字体大小 */
}

.item {
  white-space: nowrap; /* 防止文字换行 */
  font-size: 14px; /* 设置其他项的字体大小 */
}
.h1 view{
	margin-bottom: 10rpx;
}
</style>